<!--  -->
<script setup>
import { watch } from 'vue'
import { useRouter, useRoute, RouterLink } from 'vue-router'
import RankSwitcher from '@/components/RankSwitcher.vue'
import data from './mock.json'

const route = useRoute()
const router = useRouter()
const initOrder = route.query.order || 'all'

watch(() => route.query.order, retrieveData, { immediate: true })

const orderType = [
  { title: '全部', order: 'all' },
  { title: '帖子', order: 'posts' },
  { title: '邀请', order: 'invites' },
  { title: '投票', order: 'votes' }
]

function onSwitchOrder(type) {
  router.push({ query: { order: type } })
}

function retrieveData() {
  const order = route.query.order || 'all'
  // TODO: 获取数据
}
</script>

<template>
  <div class="view-container">
    <div class="header flex-between">
      <RankSwitcher :init-type="initOrder" :order-type="orderType" @on-switch-order="onSwitchOrder" />
      <div>共 {{ data.data.count }} 条消息</div>
    </div>
    <div class="body">
      <div v-for="v in data.data.list" :key="v.id" class="msg-wrapper">
        <div class="msg-header flex-between">
          <RouterLink
            :to="`/question/${v.object_info.object_map.answer}?answerId=${v.object_info.object_map.question}&commentId=${v.object_info.object_map.comment}`">
            <div>{{ v.object_info.title }}</div>
          </RouterLink>
          <div>{{ v.update_time }}</div>
        </div>
        <div class="msg-body">
          <RouterLink :to="`/users/${v.user_info.username}`">
            <div>{{ v.user_info.username }}</div>
          </RouterLink>
          <div>{{ v.notification_action }}</div>
        </div>
        <div class="msg-footer">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.view-container {

  .header {
    border-bottom: 1px solid grey;
    padding: 1em 0;
  }
}

.msg-wrapper {
  border-bottom: 1px solid grey;
  padding: 1em 0;

  .msg-header {}

  .msg-body {
    padding: 1em 0;
    display: flex;
    gap: 10px;
  }
}
</style>
